<template>
  <div class="writedynamic">
    <el-form ref="fomr" :model="formData">
      <el-row class="marginBottom">
        <!-- 日期组件 -->
        <el-col :span="4">
          <el-form-item label="创建日期：">
            <el-date-picker
              v-model="formData.date"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 点赞数 -->
        <el-col :span="4">
          <el-form-item label="点赞数:">
            <el-input type="text" v-model="formData.start"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" class="vertical">
          <el-switch
            v-model="formData.visibility"
            active-text="仅自己可见"
          ></el-switch>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!-- markdown编辑器 -->
          <mavon-editor class="position" v-model="formData.content" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="flex">
          <el-button type="primary" @click="sendDynamic">
            <i class="el-icon-check"></i> 发布动态</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 导入接口
import { writeDynamicAPI } from '@/API/api'
// 导入节流函数
import { throttle } from '@/util/index'
export default {
  name: 'Writedynamic',
  data() {
    return {
      // 表单数据
      formData: {
        // 文本
        content: '',
        // 日期
        date: '',
        // 点赞数
        start: 0,
        // 可见性
        visibility: false
      }
    }
  },
  methods: {
    // 发布动态
    sendDynamic: throttle(async function() {
      // 判断
      if (this.formData.date === '') return this.$message.warning('请选择时间!')
      if (this.formData.content === '') { return this.$message.warning('请输入内容!') }
      // 年
      const year = this.formData.date.getFullYear()
      // 月
      const month = this.formData.date.getMonth() + 1
      // 日
      const day = this.formData.date.getDate()
      // 时间
      const time =
        this.formData.date.getHours() < 10
          ? '0' + this.formData.date.getHours()
          : this.formData.date.getHours()
      // 分
      const min =
        this.formData.date.getMinutes() < 10
          ? '0' + this.formData.date.getMinutes()
          : this.formData.date.getMinutes()
      // 秒
      const s =
        this.formData.date.getSeconds() < 10
          ? '0' + this.formData.date.getSeconds()
          : this.formData.date.getSeconds()
      // 时间
      const dateTime = `${year}-${month}-${day} ${time}:${min}:${s}`
      console.log(dateTime)
      const data = {
        createTime: dateTime,
        start: this.formData.start,
        visibility: this.formData.visibility,
        content: this.formData.content
      }
      try {
        const { data: res } = await writeDynamicAPI(data)
        console.log(res)
        if (res.status !== 0) return this.$message.error(res.msg)
        this.$message.success(res.msg)
        this.formData.content = ''
        this.formData.date = ''
        this.formData.start = 0
        this.formData.visibility = false
      } catch (err) {
        console.error(err.message)
      }
    }, 2000)
  }
}
</script>

<style lang="less" scoped>
.writedynamic {
  padding: 20px 20px 0;
  .marginBottom {
    margin-bottom: 15px;
  }
  .vertical {
    margin: 56px 0 0 55px;
  }
  .flex {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
